<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      :id="code"
      ref="chartDom"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
      @click="changeSize"
    />
  </el-card>
</template>

<script>
import { initTimeSeries } from "@/views/frame/board/components/ik/echarts/dataProcess"
import theme from "@/views/frame/board/components/ik/echarts/theme/ik.json"
import * as echarts from "echarts"

export default {
  name: "IkCalendarBaseChart",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    code: {
      type: String,
      default: "bar.base"
    },
    gridType: {
      type: String,
      default: "summary"
    },
    data: {
      type: Array,
      default: function() {
        return [
          { type: "类型6", time: "2020-01-23 09:07:53", value: "39" },
          { type: "类型4", time: "2020-01-21 16:02:38", value: "30" },
          { type: "类型4", time: "2020-01-22 07:04:22", value: "35" },
          { type: "类型4", time: "2020-01-22 12:06:15", value: "37" },
          { type: "类型1", time: "2020-01-21 14:09:47", value: "30" },
          { type: "类型6", time: "2020-01-23 04:08:39", value: "35" },
          { type: "类型6", time: "2020-04-22 19:02:37", value: "30" },
          { type: "类型1", time: "2020-04-21 08:05:27", value: "30" },
          { type: "类型1", time: "2020-03-21 12:07:51", value: "30" },
          { type: "类型6", time: "2020-03-23 09:07:53", value: "39" },
          { type: "类型4", time: "2020-05-21 16:02:38", value: "30" },
          { type: "类型4", time: "2020-02-22 07:04:22", value: "35" },
          { type: "类型4", time: "2020-02-22 12:06:15", value: "37" },
          { type: "类型1", time: "2020-01-18 14:09:47", value: "30" },
          { type: "类型6", time: "2020-01-09 04:08:39", value: "35" },
          { type: "类型6", time: "2020-05-22 19:02:37", value: "30" },
          { type: "类型1", time: "2020-05-27 08:05:27", value: "30" },
          { type: "类型1", time: "2020-05-05 12:07:51", value: "30" },
          { type: "类型7", time: "2020-05-01 16:00:51", value: "39" }
        ]
      }
    },
    // 时间维度
    timeDimensionField: {
      type: String,
      default: "time"
    },
    timeDimensionFormat: {
      type: String,
      default: "yyyy-MM-DD"
    },
    timeDimensionStart: {
      type: String,
      default: "2020-01-01 00:00:00"
    },
    timeDimensionStop: {
      type: String,
      default: "2020-05-31 00:00:00"
    },
    timeDimensionInterval: {
      type: String,
      default: "1"
    },
    timeDimensionUom: {
      // day - 日  不能修改
      type: String,
      default: "day"
    },
    timeDimensionStep: {
      // 步进位置：start/stop/middle
      type: String,
      default: "middle"
    },
    // 数据分析维度 - 第二数据维度
    dataDimensionField: {
      type: String,
      default: "value"
    },
    dataDimensionMin: {
      type: String,
      default: "0"
    },
    dataDimensionMax: {
      type: String,
      default: "100"
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chartAnalysisDimension: [],
      chartSeries: [],
      chartDom: null,
      chart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    init() {
      const $this = this
      // 初始化 chart 样式
      // 基于准备好的dom，初始化echarts实例
      const dom = document.getElementById($this.code)
      echarts.registerTheme("ik", theme)
      this.chart = echarts.init(dom, "ik")

      const time = {}
      // 生成 series
      const series = initTimeSeries(
        $this.data,
        [],
        "",
        $this.timeDimensionField,
        $this.timeDimensionFormat,
        $this.timeDimensionStart,
        $this.timeDimensionStop,
        $this.timeDimensionInterval,
        $this.timeDimensionUom,
        $this.timeDimensionStep,
        $this.dataDimensionField,
        $this.gridType,
        time
      )

      // 生成数据轴数据
      const visualMap = {
        top: 0,
        type: "piecewise",
        orient: "horizontal",
        left: "center"
      }
      if ($this.dataDimensionMin !== "") {
        visualMap["min"] = Number($this.dataDimensionMin)
      }
      if ($this.dataDimensionMax !== "") {
        visualMap["max"] = Number($this.dataDimensionMax)
      }

      const chartSeries = {
        type: "heatmap",
        coordinateSystem: "calendar",
        data: series["数据"]
      }
      // 绘制图表
      this.chart.setOption({
        tooltip: {},
        visualMap: visualMap,
        calendar: {
          top: 60,
          left: 30,
          right: 30,
          range: [time.startTime, time.stopTime],
          itemStyle: {
            borderWidth: 0.5
          },
          yearLabel: {
            show: true
          },
          monthLabel: {
            show: true,
            nameMap: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
          },
          dayLabel: {
            show: true,
            nameMap: ["日", "一", "二", "三", "四", "五", "六"]
          }
        },
        series: [chartSeries]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    // height: 20%!important;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
// @import './default.scss';
// @import '../../../../../../../styles/robot/robot.scss';
</style>
